<template>
  <div>
    <div>
      
    </div>
    <el-card style="width: 60%; margin: 0 auto">
      <div class="main_box">
        <div class="left">
          <el-image style="width: 200px; height: 200px" :src="url" :fit="fit" class="box_img" />
          <h3>个人用户名称</h3>
          <div>注册日期：2024.6.1</div>
          <el-button type="success" plain>修改头像</el-button>
          <div class="msg_boxV1">
            <h3>信息绑定</h3>
            <div class="msg_box">
              <div class="msg_box_left">手机号：1232xxxxx553</div>
              <div class="msg_box_right">
                <el-button type="primary" plain>绑定手机号</el-button>
              </div>
            </div>
            <div class="msg_box">
              <div class="msg_box_left">微信：Xrtrt3</div>
              <div class="msg_box_right">
                <el-button type="primary" plain>绑定微信号</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="年龄" prop="count">
              <el-select-v2 v-model="ruleForm.count" placeholder="请选择年龄" :options="options" />
            </el-form-item>
            <el-form-item label="生日" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker v-model="ruleForm.date1" type="date" aria-label="请输入日期" placeholder="请输入日期"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col class="text-center" :span="2">
                <span class="text-gray-500">-</span>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker v-model="ruleForm.date2" aria-label="请输入时间" placeholder="请输入时间" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="是否活跃" prop="delivery">
              <el-switch v-model="ruleForm.delivery" />
            </el-form-item>
            <el-form-item label="性别" prop="location">
              <el-segmented v-model="ruleForm.location" :options="locationOptions" />
            </el-form-item>
            <el-form-item label="兴趣爱好" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox value="Online activities" name="type">
                  爬山
                </el-checkbox>
                <el-checkbox value="Promotion activities" name="type">
                  游戏
                </el-checkbox>
                <el-checkbox value="Offline activities" name="type">
                  唱歌
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                  游泳
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="其他备注" prop="desc">
              <el-input v-model="ruleForm.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
              <div style="text-align: center; margin:0 auto;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                  确定
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-card style="width: 80%; margin:20px auto">
      <h1>游玩日志</h1>
      <el-table :data="tableData" :table-layout="tableLayout">
        <el-table-column prop="date" label="时间" />
        <el-table-column prop="name" label="人物" />
        <el-table-column prop="address" label="地点" />
        <el-table-column prop="msg" label="备注" />
      </el-table>
      <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="50" />
      </div>
    </el-card>
  </div>
</template>
<script lang="js" setup>
import { ref, reactive } from 'vue'
const url = ref(require('../../assets/订单/头像.png'))


const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
})

const locationOptions = ['男', '女', '未知']

const rules = reactive({
  name: [
    { required: true, message: '请输入名字', trigger: 'blur' },
    { min: 3, max: 5, message: '名字限制在3到5个字', trigger: 'blur' },
  ],
  count: [
    {
      required: true,
      message: '请输入年龄',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: '请输入月份',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: '请输入时间',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 100 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))


const tableLayout = ref('fixed')

const tableData = [
  {
    date: '2016-05-03',
    name: '王四',
    address: '青城山前山',
    msg: '不好玩',
  },
  {
    date: '2016-05-02',
    name: '张三',
    address: '青城山后山',
    msg: '好多水，好多山',
  },
  {
    date: '2016-05-04',
    name: '王四，张武',
    address: '青城山前山',
    msg: '想吃东西',
  },
  {
    date: '2016-05-01',
    name: '刘备',
    address: '青城山前山',
    msg: '很震撼',
  },
  {
    date: '2016-05-09',
    name: '张一，张二',
    address: '青城山后山',
    msg: '很好玩',
  },
  {
    date: '2016-05-01',
    name: '菲菲',
    address: '青城山后山',
    msg: '消费不起',
  },
  {
    date: '2016-05-09',
    name: '光宇',
    address: '青城山前山',
    msg: '根本停不下来',
  },
  {
    date: '2016-05-01',
    name: '曹操',
    address: '青城山后山',
    msg: '很懒想睡觉',
  },
]

</script>
<style lang="less" scoped>
.main_box {
  // background-color: red;
  width: 100%;
  margin: 0 auto;
  display: flex;

  .left {
    width: 40%;
    text-align: center;

    .box_img {
      background-color: green;
      border-radius: 100px;
      overflow: hidden;
    }

    .msg_boxV1 {
      padding-top: 20px;
      padding-bottom: 10px;

      .msg_box {
        width: 80%;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
    }
  }

  .right {
    width: 60%;
  }

  .example-pagination-block+.example-pagination-block {
    margin-top: 10px;

  }
}
</style>